<template>
  <div class="login" :style="{ backgroundImage: `url(${banner})` }">
    <el-row>
      <el-col :span="24">
        <h3>库存管理系统</h3>
      </el-col>
      <el-col :span="24">
        <el-divider></el-divider>
      </el-col>
      <el-col :span="24">
        <el-input
          placeholder="请输入账号"
          v-model="account"
          class="input-with-select"
          prefix-icon="el-icon-user"
          size="medium"
        ></el-input>
      </el-col>
      <el-col :span="24">
        <el-input
          placeholder="请输入密码"
          v-model="account"
          class="input-with-select"
          prefix-icon="el-icon-lock"
          size="medium"
        ></el-input>
      </el-col>
      <el-col :span="12">
        <el-input
          placeholder="请输入验证码"
          v-model="account"
          class="input-with-select"
          size="medium"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-image></el-image>
      </el-col>
      <el-col :span="24">
        <el-button type="primary" size="medium" @click="login()"
          >登录</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      account: "",
      banner: require("@/assets/banner.jpg")
    };
  },
  methods: {
    login() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  .el-row {
    width: 380px;
    height: 326px;
    position: fixed;
    top: 50%;
    left: 64%;
    background: #fff;
    margin-top: -190px;
    // margin-left: -163px;
    padding: 0 20px;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    h3 {
      margin-bottom: 0;
    }
    .el-col {
      padding-left: 2px;
      padding-right: 2px;
    }
    .el-input {
      margin-bottom: 18px;
    }
    .el-image {
      width: 100%;
      height: 100%;
    }
    .el-button--medium {
      width: 100%;
      background: #222;
      border-color: #999;
      box-shadow: 0 2px 12px 0 #c0c4cc;
    }
    ::v-deep .el-image__error {
      min-height: 34px;
    }
  }
  ::v-deep .el-input--medium .el-input__icon {
    font-size: 20px;
  }
}
</style>
